// 引入React
import React, { Component } from 'react';
import EditableTable from './EditableTable';
export default class Content extends Component {
	constructor(props) {
		super(props);
		// 通过React.createRef()创建ref,挂载到父组件上
		this.editTableEl = React.createRef();
	}
	render() {
		return (
			<div>
				<EditableTable
					// 挂载ref
					ref={this.editTableEl}
				/>
        <button onClick={()=>{alert(this.editTableEl.current.os())}}>父组件的button</button>
			</div>
		)
	}
}

import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';

//父组件
const App = props => {
  const fancyInputRef = useRef();
  // 创建ref相当于React.createRef()
  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      {/* 挂载ref */}
      <button
        onClick={() => fancyInputRef.current.focus()}
      >父组件调用子组件的 focus</button>
    </div>
  )
}
// 子组件
const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  // useImperativeHandle()第一个参数是cueent对象的ref，第二个是个函数，返回一个对象，第三个参数，只有参数里值发生变化父组件接收的值才会变化才会引发变化

  return <input ref={inputRef} type="text" />
});

export default App

componentWillMount: function () {
    var onLogin = this.props.onLogin || function () {},
        onLogout = this.props.onLogout || function () {};
 
    this.on('authChange', function () {
      console.log('user authenticated:', this.state.isAuthenticated);
      return this.state.isAuthenticated
              ? onLogin(this.state)
              : onLogout(this.state);
    }.bind(this));
  },
  很明显这种情况就是在 dom 结构销毁的时候，事件却没有清除导致的内存泄漏，所以我们需要在componentWillUnmount的时候去清除挂载的方法//
  componentWillUnmount: function () {
      this.off('authChange', this.authChange);
      this.authChange = null;
  }

React.render(
  <QRCode value="https://jian521ymn.github.io/" />,
  mountNode
);

//传入为空返回成成功态，所有加载完才会，改成功态，一个失败态就会直接结束
        Promise.all_ = function (promise_) {
            return new Promise((resolve, reject) => {
                //array.from，会转为真正的数组，将传入的promise实例组成一个真正的狐族
                promise_ = Array.from(promise_)
                if (promise_.length === 0) {//如果传入的的是一个空数组，会异步的返回一个成功态的promise
                    resolve([])
                } else {
                    let result = [];//准备一个空数组
                    let index = 0; //定义一个index
                }
                for (let i = 0; i < promise_.length; i++) {//循环这几个promise
                    Promise.resolve(promise_[i]).then(data => {
                        result[i] = data//给数组增加一项
                        if(++index===promise_.length){
                            //如果所有promise都是fulfilled，promise。all实例才变fulfilled
                            resolve(result)//所有promise都获取完数据，length相等，才会执行他
                        }
                    },err=>{
                        reject(err);
                        return
                    })

                }
            })
        }

Promise.ra_ce = function(promises) {
    promises = Array.from(promises);
    return new Promise((resolve, reject) => {
        if(promises.length===0) {
            return;
        } else {
            for(let i=0; i<promises.length; i++) {
                Promise.resolve(promises[i]).then(data => {
                    resolve(data);
                    return;
                }, err => {
                    reject(err);
                    return;
                })
            }
        }
    })
}

Promise.prototype.finally_ = function (callback) {
         //  console.log(this);this指向promise这个实例
           return this.then((value) => {//需要返回一个promise实例
               return Promise.resolve(callback()).then(() => {
                   return value;//成功态
               });
           }, (err) => {//需要返回一个promise实例
               return Promise.resolve(callback()).then(() => {
                   throw err//失败态
               })
           })
       }
       Promise.prototype.finally_()

import React, { Component } from 'react';

function shallowEqual(obj1, obj2) {//传入新老state和prop
  if (obj1 === obj2) {//一样直接不改变
    return true
  }
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false//检测，如果有一个满足就更新
  }
  let keys1 = Object.keys(obj1)//拿到所有属性名组成的数组
  let keys2 = Object.keys(obj2)//拿到所有属性名组成的数组
  if (keys1.length !== keys2.length) {
    return false//如果键值对数量不相等，那么更新
  }
  for (const key of keys1) {//循环进行比较
    if (!obj2.hasOwnProperty(key) || obj1[key] !== obj2[key]) {
      return false//如果obj2没有key的值，或者表层的key的值不相等时，更新
    }
  }
  return true//走到这里，说明没改变，那么不更新
}

class PureComponent extends Component {//引用shouldcomponentupdate方法
  shouldComponentUpdate(nextProps, nextState) {//传入的nextprops，nextState与这次的比较，并且传入
    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)
    //返回值是ture就更新组件，false就不更新组件，这里调用手写shallowEqual方法
  }
  render() {
    return this.props.children;
  }
}

export default PureComponent;

//祖宗注入。provide
<template>
    <div id="app">
    </div>
</template>
    <script>
        export default {
            data () {
                    return {
                        datas: [
                            {
                                id: 1,
                                label: '产品一'
                            },
                            {
                                、,
            provide {
                return {
                    datas: this.datas
                }
            }
        }
    </script>

//后代通过inject都可以拿到
<template>
    <div>
        <ul>
        <li v-for="(item, index) in datas" :key="index">
            {{ item.label }}
        </li>
        </ul>
    </div>
</template>
    <script>
        export default {
            inject: ['datas']
        }
    </script>